<template>
	<view class="content">
		<u-sticky offset-top="0" h5-nav-height="0">
			<view class="mhead" :style="{paddingTop: titleTop + 'px'}">
				<view class="mhone">
					<image class="nav_icon_back" @click="getback" src="@/pages_client/static/img/nav_icon_back.png" />
					<view class="tsou">
						<image class="icon_ss" src="@/pages_client/static/img/icon_ssbai.png" />
						<u-input class="iteminput" input-align="left" v-model="keywords" type="text" placeholder='输入关键词搜索' />
						<view class="souname" @click="getClear">搜索</view>
					</view>
				</view>
				<view class="tuanone" v-if="shopinfo">
					<image class="tous" :src="shopinfo.logo" />
					<view class="trig">
						<text class="jname txt">{{shopinfo.name}}</text>
						<view class="rowms">
							<image class="dinbai" src="@/pages_client/static/img/dinbai.png" />
							<text class="weizhi txt">{{shopinfo.address+' ' +shopinfo.distance}}</text>
						</view>
					</view>
				</view>
				<view class="warp">
					<u-tabs bg-color="none" :list="tablist" :is-scroll="false" :current="current" font-size="32" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
				</view>
				<view class="shaiview" v-if="tabname == '商品'||tabname == '团购'">
					<!-- <view class="zongitem" v-if="current == 1" @click="getnav(4)">
						<text class="zname">距离</text>
						
						<image class="xicon" v-if="order=='distance'&&orderfive==''" src="@/pages_client/static/img/icon_jg.png" />
						<image class="xicon" v-else-if="order=='distance'&&orderfive=='asc'" src="@/pages_client/static/img/icon_jgtwo.png" />
						<image class="xicon" v-else-if="order=='distance'&&orderfive=='desc'" src="@/pages_client/static/img/icon_jgthree.png" />
						<image class="xicon" v-else src="@/pages_client/static/img/icon_jg.png" />
					</view> -->
					<view class="zongitem" @click="getnav(1)">
						<text class="zname">综合</text>
						
						<image class="xicon" v-if="order=='weigh'&&ordertwo==''" src="@/pages_client/static/img/icon_jg.png" />
						<image class="xicon" v-else-if="order=='weigh'&&ordertwo=='asc'" src="@/pages_client/static/img/icon_jgtwo.png" />
						<image class="xicon" v-else-if="order=='weigh'&&ordertwo=='desc'" src="@/pages_client/static/img/icon_jgthree.png" />
						<image class="xicon" v-else src="@/pages_client/static/img/icon_jg.png" />
					</view>
					<view class="zongitem" @click="getnav(2)">
						<text class="zname">销量</text>
						<image class="xicon" v-if="order=='sales'&&orderthree==''" src="@/pages_client/static/img/icon_jg.png" />
						<image class="xicon" v-else-if="order=='sales'&&orderthree=='asc'" src="@/pages_client/static/img/icon_jgtwo.png" />
						<image class="xicon" v-else-if="order=='sales'&&orderthree=='desc'" src="@/pages_client/static/img/icon_jgthree.png" />
						<image class="xicon" v-else src="@/pages_client/static/img/icon_jg.png" />
					</view>
					<view class="zongitem" @click="getnav(3)">
						<text class="zname">价格</text>
						<image class="xicon" v-if="order=='price'&&orderfour==''" src="@/pages_client/static/img/icon_jg.png" />
						<image class="xicon" v-else-if="order=='price'&&orderfour=='asc'" src="@/pages_client/static/img/icon_jgtwo.png" />
						<image class="xicon" v-else-if="order=='price'&&orderfour=='desc'" src="@/pages_client/static/img/icon_jgthree.png" />
						<image class="xicon" v-else src="@/pages_client/static/img/icon_jg.png" />
					</view>
				</view>
			</view>
			
		</u-sticky>
		<view class="mlist-shop" v-if="tabname == '商品'">
			<view class="mitem-shop" v-for="(item,index) in list" :key="index" @click="getDetail(item)">
				<image class="itemtu" :src="item.image" mode="aspectFill" />
				<view class="mright">
					<view class="row tp">
						<text class="bt txt">{{ item.title }}</text>
					</view>
					<view class="row zhe">
						<view class="zheitem" v-for="(i,ind) in item.tags">{{i}}</view>
						<view class="zheitem kucun">库存:{{ item.stock }}</view>
					</view>
					<view class="tuanview">
						<text class="qian">¥<text class="qnum">{{item.price}}</text></text>
						<text class="yjia" v-if="item.oprice">￥{{ item.oprice }}</text>
					</view>
					
				</view>
			</view>
			
		</view>
		<view class="mlist" v-if="tabname == '团购'">
			<!-- <view class="mitem mfl"  @click="gettuanDetail(item)">
				<image class="itemtu" src="https://dong.tongtongz.top/uploads/20250609/2c79aab12a0920cf4695269868663dff.jpg" />
				<view class="mright">
					<view class="row tp">
						<text class="bt txt">免费领</text>
					</view>
					<view class="row zhe">
						<view class="zheitem kucun">库存:111</view>
					</view>
					<view class="tuanview">
						<text class="qian">¥<text class="qnum">0.00</text></text>
						<text class="yjia">￥10000</text>
						<view class="goumai">领取</view>
					</view>
					
				</view>
			</view> -->

			<view class="mitem" :class="item.price==0?'mfl':''" v-for="(item,index) in list" :key="index" @click="gettuanDetail(item)">
				<image class="itemtu" :src="item.image" mode="aspectFill" />
				<view class="mright">
					<view class="row tp">
						<text class="bt txt">{{ item.title }}</text>
					</view>
					<!-- <view class="row">
						<text class="diname">{{item.title}}</text>
						<view class="row ml">
							<image class="icon_dw" src="@/pages_client/static/img/icon_dw.png" />
							<text class="mi">200m</text>
						</view>
					</view> -->
					<view class="row zhe">
						<view class="zheitem" v-for="(i,ind) in item.tags">{{i}}</view>
						<view class="zheitem kucun">库存:{{ item.stock }}</view>
					</view>
					<view class="tuanview">
						<text class="qian">¥<text class="qnum">{{item.price}}</text></text>
						<text class="yjia" v-if="item.oprice">￥{{ item.oprice }}</text>
						<view class="goumai">{{ item.price==0?'领取':'购买' }}</view>
					</view>
					
				</view>
			</view>
			
		</view>
		<u-loadmore v-if="tabname !='店铺信息'" :status="status" @loadmore="loadmore" />
		<view class="sinfo" v-if="tabname =='店铺信息'">
			<view class="sitem">
				<text class="sname">地址</text>
				<text class="nval">{{ shopinfo.address }}</text>
				<image class="dhang" @click="getadress" src="@/pages_client/static/img/dhang.png" />
			</view>
			<view class="sitem">
				<text class="sname">电话</text>
				<text class="nval">{{shopinfo.mobile}}</text>
				<image class="dhang" @click="getphonetwo" src="@/pages_client/static/img/icon_dh.png" />
			</view>
			<view class="sitem">
				<text class="sname">主营范围</text>
				<view class="zhuyao">
					<view class="zy" v-for="(item,index) in shopinfo.cate_ids">{{item}}</view>
				</view>
			</view>
			<view class="sitem col">
				<text class="sname">商家照片</text>
				<view class="zhaopian">
					<image class="tu" v-for="(item,index) in shopinfo.images" @click="geyulan(item)" :src="item" />
				</view>
			</view>
			<view class="sitem col">
				<text class="sname">商家介绍</text>
				<view class="zhaopian">
					<text class="jiashao">{{shopinfo.descript}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				titleTop: 0,
				count: 5,
				value: 4,
				tablist: [ {
					name: '团购'
				},{
					name: '商品'
				}, {
					name: '店铺信息'
				}],
				current: 0,
				tabname:'团购',
				shop_id:'',
				latitude:'',
				longitude:'',
				shopinfo:{},
				list: [],
				page: 1,
				limit: 10,
				last_page: 1,
				status: "loadmore",
				ordertwo:'asc',
				orderthree:'',
				orderfour:'',
				orderfive:'asc',
				order:'weigh',//排序 比如销量 sales desc /sales asc   
				//asc 从小到大 这个是正序 desc是倒序 排序 综合 weigh 销量 sales 价格 price 距离 distance
				keywords:"",
				is_shenhe:1,////1就是开启审核
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			let that = this;
			// 获取胶囊按钮位置信息
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const { top, height } = menuButtonInfo;
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

			// 计算标题需要偏移的位置
			const titleTop = top + (height - statusBarHeight) / 2;
			this.titleTop = titleTop;//设置标题顶部距离
			this.statusBarHeight = statusBarHeight;//设置状态栏高度
			// #endif
			// #ifdef H5
			this.titleTop = 20;//设置标题顶部距离
			// #endif
			// this.startScroll();//开始滚动
		},
		onLoad(option) {
			if(option.id){
				this.shop_id = option.id
			}
			if(option.latitude){
				this.latitude = option.latitude
			}
			if(option.longitude){
				this.longitude = option.longitude
			}
			this.getshenhe()
			this.getinfo();
			
		},
		onShow() {
		},
		onReachBottom: function () {
			this.loadmore();
		},
		methods: {
			async getshenhe(){
				let res = await this.$u.api.getShenhe({
				});
				if(res){

					if(!this.compareVersion(this.$store.state.Version,res.version)){
						//当前版本小于 接口返回版本
						this.is_shenhe = res.is_shenhe//1就是开启审核
						// #ifdef H5
						this.is_shenhe = 0
						//  #endif
					}else{
						//当前版本等于或者大于 接口返回版本 显示
						this.is_shenhe = 0
					}
					if(this.is_shenhe == 1){
						this.tablist= [{
							name: '商品'
						}, {
							name: '店铺信息'
						}]
						this.tabname = '商品'

					}
					this.getList()
				}
			},
			async getinfo(){
				let res = await this.$u.api.getShopInfo({
					shop_id:this.shop_id,
					lat:this.latitude,
					lng:this.longitude,
				});
				this.shopinfo = res
			},
			change(e){
				this.current = e
				this.tabname = this.tablist[this.current].name
				this.getClear()
			},
			getback(){
				uni.navigateBack({ delta: 1 })
			},
			getadress() {
				let that = this
				uni.openLocation({
					latitude: Number(that.shopinfo.lat),
					longitude: Number(that.shopinfo.lng),
					name: that.shopinfo.address,
					address: that.shopinfo.address,
					scale: 18,
					success(res) {
						console.log('打开地图成功');
					},
					fail(err) {
						console.error('打开地图失败', err);
					}
				});
				
			},
			geyulan(e) {
				uni.previewImage({
					current: e, // 当前显示图片的 http 链接
					urls: [e] // 需要预览的图片 http 链接列表
				});
			},
			getphonetwo(){
                let that = this
                uni.makePhoneCall({
					phoneNumber: this.shopinfo.mobile, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
                        // 请求接口 报名成功
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
            },
			async getList(){//列表数据
				let ordername = ''
				ordername = this.order+' '+this.ordertwo
				if(this.tabname == '商品'){//商品
					let res = await this.$u.api.getGoodsListByShop({
					limit:this.limit,
					page:this.page,
					shop_id:this.shop_id,
					order:ordername,
					keywords:this.keywords
					});
					this.last_page = res.lastpage
					let list = res.list;
					for(let i in list){
						list[i].isselect = false
					}
					this.list = this.page == 1 ? list : [...this.list, ...list];	
					if(res.list==''||Number(list.length)<Number(this.limit)||Number(this.page)>Number(this.last_page)){
						this.status = 'nomore';
					}
				}else if(this.tabname == '团购'){//团购
					let res = await this.$u.api.getTuanGoodsListByShop({
					limit:this.limit,
					page:this.page,
					shop_id:this.shop_id,
					order:ordername,
					keywords:this.keywords
					});
					this.last_page = res.lastpage
					let list = res.list;
					for(let i in list){
						list[i].isselect = false
					}
					this.list = this.page == 1 ? list : [...this.list, ...list];	
					if(res.list==''||Number(list.length)<Number(this.limit)||Number(this.page)>Number(this.last_page)){
						this.status = 'nomore';
					}
				}
				
				
			},
			loadmore() {
				let page = this.page;
				// let last_page = this.last_page;
				if (this.status == 'loadmore') {
					this.page++;
					this.getList();
				}
			},
			getClear(){
				this.list = []
				this.page = 1,
				this.status= "loadmore"
				this.getList()
			},
			getnav(e){
				if(e == 1){
					//综合
					this.order = 'weigh'

					if(this.ordertwo == ''){
						this.ordertwo = 'asc'
					}else if(this.ordertwo == 'asc'){
						this.ordertwo = 'desc'
					}else if(this.ordertwo == 'desc'){
						this.ordertwo = 'asc'
					}
				}else if(e == 2){
					//销量
					this.order = 'sales'
					if(this.orderthree == ''){
						this.orderthree = 'asc'
					}else if(this.orderthree == 'asc'){
						this.orderthree = 'desc'
					}else if(this.orderthree == 'desc'){
						this.orderthree = 'asc'
					}
				}else if(e == 3){
					//销量
					this.order = 'price'
					if(this.orderfour == ''){
						this.orderfour = 'asc'
					}else if(this.orderfour == 'asc'){
						this.orderfour = 'desc'
					}else if(this.orderfour == 'desc'){
						this.orderfour = 'asc'
					}
				}else if(e == 4){
					//距离
					this.order = 'distance'
					if(this.orderfive == ''){
						this.orderfive = 'asc'
					}else if(this.orderfive == 'asc'){
						this.orderfive = 'desc'
					}else if(this.orderfive == 'desc'){
						this.orderfive = 'asc'
					}
				}
				this.getClear()
			},
			getDetail(item){
				this.navrouter('/pages_client/twoPage/ShopDetail?type=1'+'&id='+item.id+'&shop_id='+this.shop_id)
			},
			gettuanDetail(item){
				this.navrouter('/pages_client/twoPage/TuanDetail?type=2'+'&id='+item.id+'&shop_id='+this.shop_id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.content{
		background-color: #F5F5F5;
		min-height: 100vh;
		padding-bottom: 30rpx;
		.mhead{
			display: flex;
			flex-direction: column;
			padding: 0 0rpx;
			background: #383533;
		}
		.nav_icon_back{
			width: 44rpx;
			height: 44rpx;
		}
		.mhone{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 15rpx;
			.htit{
				font-weight: 800;
				font-size: 44rpx;
				color: #111111;
				display: inline-block;
				margin-right: 20rpx;
				position: relative;
				top: -6rpx;
			}
			.tsou{
				display: flex;
				flex-direction: row;
				background: rgba(242, 242, 242, 0.5);
				border-radius: 50rpx;
				padding: 6rpx 25rpx;
				align-items: center;
				margin-bottom: 14rpx;
				max-width: 60%;
				margin-left: 14rpx;
				/deep/.uni-input-input {
					color: #fff;
				}
				.icon_ss{
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
				.iteminput{
					color: #fff;
					margin-right: 20rpx;
					width: 55%;
				}
				.souname{
					margin-left: auto;
					height: 58rpx;
					background: #fff;
					border-radius: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #333;
					width: 90rpx;
				}
			}
		}
		.tuanone{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-bottom: 30rpx;
			padding-top: 10rpx;
			margin: 30rpx 15rpx;
			.tous{
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
			}
			.trig{
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				width: 80%;
				.jname{
					max-width: 100%;
					display: inline-block;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
				}
				.rowms{
					margin-top: 10rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.dinbai{
						width: 24rpx;
						margin-right: 5rpx;
						height: 24rpx;
					}
					.weizhi{
						max-width: 90%;
						display: inline-block;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
			}

		}
	}
	.mlist-shop{
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.mitem-shop{
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-bottom: 24rpx;
			width: 48.5%;
			.itemtu{
				width: 100%;
				height: 330rpx;
				margin-right: 20rpx;
				border-radius: 20rpx 20rpx 0 0;
			}
			.mright{
				width: 100%;
				flex-direction: column;
				background-color: #fff;
				border-radius: 0 0 20rpx 20rpx;
				padding: 10rpx 20rpx 25rpx;
				.row{
					display: flex;
					flex-direction: row;
					align-items: center;

				}
				.bt{
					max-width: 100%;
					display: inline-block;
					font-weight: 800;
					font-size: 30rpx;
					color: #111111;
					// height: 43rpx;
				}
				.txttwo{
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2; /* 限制文本为2行 */
					overflow: hidden;
				}
				.icon_rz{
					width: 28rpx;
					height: 28rpx;
					margin-left: 5rpx;
				}
				.tp{
					margin-bottom: 10rpx;
				}
				
				.tptwo{
					margin-bottom: 5rpx;
				}
				.diname{
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
				}
				.icon_dw{
					width: 20rpx;
					height: 20rpx;
					margin-right: 5rpx;
				}
				.mi{
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
				}
				.zheitem{
					padding: 3rpx 10rpx;
					background: #EEEEEE;
					border-radius: 5rpx;
					border: 1px solid #999999;
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					margin-right: 14rpx;
				}
				.kucun{
					background-color: #dd2929;
					border: none;
					color: #fff;
				}
				
				.tuanview{
					margin-top: 30rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.tname{
						width: 34rpx;
						height: 34rpx;
						background: #FFF0ED;
						border-radius: 8rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 20rpx;
						color: #FF6100;
					}
					.qian{
						font-weight: bold;
						font-size: 28rpx;
						color: #FF6100;
						display: inline-block;
						margin: 0 6rpx;
						position: relative;
						top: -2rpx;
						.qnum{
							font-size: 36rpx;
						}
					}
					.yjia{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						text-decoration-line: line-through;
					}
					.shopname{
						max-width: 50%;
						display: inline-block;
						font-weight: 500;
						font-size: 26rpx;
						color: #1E1E1E;
						margin-left: 20rpx;
					}
				}
			}

		}
		.mitem-shop:nth-child(even){
			margin-left: auto;
		}
	}
	.shaiview{
		display: flex;
		flex-direction: row;
		height: 100rpx;
		padding: 0 30rpx;
		align-items: center;
		background: #FFFFFF;
		.zongitem{
			display: flex;
			flex-direction: row;
			align-items: center;
			min-width: 33%;
			justify-content: center;
			.zname{
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				display: inline-block;
				margin-right: 6rpx;
			}
			.xicon{
				width: 32rpx;
				height: 32rpx;
			}

		}
	}

	.mlist{
		padding: 30rpx 20rpx;
		display: flex;
		flex-direction: column;
		.mitem{
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			background: #FFFFFF;
			border-radius: 30rpx;
			margin-bottom: 20rpx;
			.itemtu{
				width: 200rpx;
				height: 200rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
			}
			.row{
				margin-bottom: 10rpx;
			}
			.mright{
				width: 67%;
				flex-direction: column;
				display: flex;
				.row{
					display: flex;
					flex-direction: row;
					align-items: center;

				}
				.bt{
					max-width: 100%;
					display: inline-block;
					font-weight: 800;
					font-size: 30rpx;
					color: #111111;
				}
				.icon_rz{
					width: 28rpx;
					height: 28rpx;
					margin-left: 5rpx;
				}
				.tp{
					margin-bottom: 10rpx;
				}
				.tptwo{
					margin-bottom: 5rpx;
				}
				.diname{
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
				}
				.icon_dw{
					width: 20rpx;
					height: 20rpx;
					margin-right: 5rpx;
				}
				.mi{
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
				}
				.tuanview{
					margin-top: auto;
					display: flex;
					flex-direction: row;
					align-items: center;
					.tname{
						width: 34rpx;
						height: 34rpx;
						background: #FFF0ED;
						border-radius: 8rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 20rpx;
						color: #FF6100;
					}
					.qian{
						font-weight: bold;
						font-size: 28rpx;
						color: #FF6100;
						display: inline-block;
						margin: 0 6rpx 0 0;
						position: relative;
						top: -2rpx;
						.qnum{
							font-size: 36rpx;
						}
					}
					.yjia{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						text-decoration-line: line-through;
					}
					.shopname{
						max-width: 50%;
						display: inline-block;
						font-weight: 500;
						font-size: 26rpx;
						color: #1E1E1E;
						margin-left: 20rpx;
					}
					.goumai{
						margin-left: auto;
						width: 164rpx;
						height: 68rpx;
						background: #FF7C41;
						border-radius: 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 26rpx;
						color: #FFFFFF;
					}
					
				}
			}
			.zheitem{
				padding: 3rpx 10rpx;
				background: #EEEEEE;
				border-radius: 5rpx;
				border: 1px solid #999999;
				font-weight: 400;
				font-size: 20rpx;
				color: #666666;
				margin-right: 14rpx;
				
			}
			.kucun{
					background-color: #dd2929;
					border: none;
					color: #fff;
				}

		}
		.mfl{
			background: #383533;
			.mright{
				.row{
					.bt{
						color: #fff;
					}
				}
				.tuanview{
					.goumai{
						background: #e52020;
						border-radius: 50rpx;
					}
					.qian{
						color: #e52020;
					}
					.yjia{
						color: #666;
					}
				}
			}
		}
	}
	.sinfo{
		padding: 30rpx 20rpx;
		.sitem{
			display: flex;
			flex-direction: row;
			padding:30rpx 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			.sname{
				font-weight: bold;
				font-size: 30rpx;
				color: #222222;
				min-width: 150rpx;
				display: inline-block;
			}
			.nval{
				max-width: 68%;
				display: inline-block;
				font-weight: bold;
				font-size: 30rpx;
				color: #999999;
			}
			.dhang{
				margin-left: auto;
				width: 50rpx;
				height: 50rpx;
			}
			.zhuyao{
				max-width: 80%;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.zy{
					padding: 4rpx 20rpx;
					background: #F5F5F5;
					border-radius: 6rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #333333;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
				}
			}
		}
		.col{
			display: flex;
			flex-direction: column;
			.zhaopian{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.tu{
					width: 135rpx;
					height: 135rpx;
					margin-right: 20rpx;
					border-radius: 20rpx;
				}
				.jiashao{
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
				}
			}
		}
	}
</style>
